<div class="container-fluid m-0 p-0" *ngIf="goods$ | async as goods">
  <nz-card nzHoverable [nzCover]="coverTemplate" [nzBodyStyle]="{'padding': '0.8rem'}">
    <nz-card-meta [nzTitle]="cardMetaTitle" [nzDescription]="cardMetaTemplate"></nz-card-meta>
  </nz-card>
  <ng-template #coverTemplate>
    <nz-carousel nzAutoPlay [nzEnableSwipe]="true">
      <div nz-carousel-content *ngFor="let url of goods.data.small_images.string">
        <img class="img-fluid" [src]="url" [alt]="goods.data.title"/>
      </div>
    </nz-carousel>
  </ng-template>
  <ng-template #cardMetaTitle>
    <h5 class="text-wrap small m-0 p-0">{{goods.data.title}}</h5>
  </ng-template>
  <ng-template #cardMetaTemplate>
    <div class="d-flex justify-content-between">
      <strong class="text-danger small">券后包邮价:
        <span class="font-weight-bold" style="font-size: 1.2rem">
          ￥{{(goods.data.coupon_remain_count > 0 ? goods.data.zk_final_price - goods.data.coupon_amount : goods.data.zk_final_price)|number:'1.1-2'}}</span>
      </strong>
      <strong class="text-danger small">预计奖金:
        <span class="font-weight-bold"
              style="font-size: 1.2rem">￥{{goods.commission | number:'1.1-2'}}</span></strong>
    </div>
    <div class="border-top py-2 d-flex justify-content-between text-muted">
      <del>在售价：￥{{goods.data.zk_final_price}}</del>
      <span *ngIf="goods.data.coupon_remain_count>0">优惠券: {{goods.data.coupon_amount |number:'1.1-2'}}元</span>
      <span class="am-margin-left-xs">销量: {{goods.data.volume}}</span>
    </div>
    <div class="border-top py-2 d-flex justify-content-between">
      <strong class="text-danger small">商品评分:
        <span class="font-weight-bold" style="font-size: 1.2rem">{{goods.data.shop_dsr / 10000 |number:'1.1-1'}}</span></strong>
      <button type="button" class="btn btn-primary" (click)="onOpenPwd()">口令购买</button>
    </div>
    <p class="card-text border-top py-2"><strong class="text-danger">简介:</strong>
      {{goods.data.item_description}}</p>
  </ng-template>
  <!------------推荐商品------------------>
  <nz-list class="mt-3" [nzHeader]="listTitle"
           [nzDataSource]="goodsRe"
           [nzItemLayout]="'horizontal'"
           [nzLoading]="initLoading"
           [nzRenderItem]="item">
    <ng-template #listTitle><h5 class="text-danger text-center small p-0 m-0">猜你喜欢</h5></ng-template>
    <ng-template #item let-item>
      <a class="alert-link" [routerLink]="['/detail',item.num_iid]">
        <nz-list-item>
          <nz-list-item-meta [nzAvatar]="nzAvatar" [nzTitle]="nzTitle"
                             [nzDescription]="description">
            <ng-template #nzTitle>{{item.title}}</ng-template>
            <ng-template #nzAvatar>
              <img width="120" [src]="item.pict_url" [alt]="item.title">
            </ng-template>
            <ng-template #description>
              <div class="d-flex justify-content-between p-1 small">
                <del>在售价：￥{{item.reserve_price}}</del>
                <strong class="text-danger">券后包邮价:
                  <span class="font-weight-bold">￥{{item.zk_final_price|number:'1.1-2'}}</span>
                </strong>
              </div>
              <div class=" d-flex justify-content-between p-1 small border-top">
                <span class="text-muted">销量: {{item.volume}}</span>
                <span class="text-muted">卖家: {{item.nick}}</span>
              </div>
            </ng-template>
          </nz-list-item-meta>
        </nz-list-item>
      </a>
    </ng-template>
  </nz-list>
</div>

<nz-modal [nzVisible]="pwdModal" [nzTitle]="'口令购买'" [nzFooter]="null" (nzOnCancel)="pwdModal=false">
  <form>
    <label>
          <textarea #pwdC (focus)="onPwdSelect(pwdC)" readonly autofocus rows="7"
                    style="font-size: 0.8rem;text-align: left; fill-opacity: 1.0;resize:none;" nz-input
                    name="pwdContext"
                    [(ngModel)]="pwdContext"></textarea>
    </label>
    <div class="d-flex flex-column justify-content-center">
      <button #clipboard ngxClipboard (cbOnSuccess)="copied($event)" [cbContent]="pwdC.value"
              class="mt-3 rounded-pill btn btn-danger">一键复制
      </button>
      <div class="text-center text-primary small mt-3">
        注：若复制失败，请手动复制口令
      </div>
    </div>
  </form>
  <nz-divider></nz-divider>
  <p class="form-help text-danger">
    <span>使用说明：</span>
    <span>复制口令后去手机【<img src="assets/images/taobao/tb.jpg"
                        style="width:20px;height:20px;border-radius: 4px;position: relative;top: -2px;">】
        即可领取秘券购买！</span>
  </p>
</nz-modal>
